<template>
	<swiper class="banner" indicator-dots circular :autoplay="true">
		<swiper-item v-for="item in pictures" :key="item.id">
			<image @tap="onPreviewImage(item.url)" :src="item.url"></image>
		</swiper-item>
	</swiper> 
	<view class="box">
		<text class="box-title">{{ title }}</text>
		<view class="chile">
			<span></span>
		</view>
	</view>
	<view class="grid-menu">
	    <view class="grid-item" v-for="(item, index) in items" :key="index" @click="handleItemClick(item)">
	      <view class="item-content">
	        <image :src="item.icon" class="item-icon"/>
	        <text class="item-text">{{ item.text }}</text>
	      </view>
	    </view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				title: '默认标题', 
				// 轮播图数据
				pictures: [
					{ id: '1', url: "https://img0.baidu.com/it/u=1085984298,3525574984&fm=253&fmt=auto&app=138&f=JPEG" },
					{ id: '2', url: "https://img0.baidu.com/it/u=1085984298,3525574984&fm=253&fmt=auto&app=138&f=JPEG" },
					{ id: '3', url: "https://img0.baidu.com/it/u=1085984298,3525574984&fm=253&fmt=auto&app=138&f=JPEG" },
				],
				 items: [
				        { icon: '/static/grid/invite.png', text: '邀请伙伴' },
				        { icon: '/static/grid/partner.png', text: '伙伴情况' },
				        { icon: '/static/grid/record.png', text: '答题记录' },
				        { icon: '/static/grid/answer.png', text: '参与答题' },
				        { icon: '/static/grid/ranking.png', text: '排行榜' },
				        { icon: '/static/grid/editname.png', text: '修改资料' },
				        { icon: '/static/grid/feedback.png', text: '意见反馈' },
				        { icon: '/static/grid/game.png', text: '罗盘游戏' },
				        { icon: '/static/grid/team.png', text: '大团队长' },
				        // Add more items as needed
				      ] 
			}
		},
		onLoad() {
			this.fetchTitleText(); // 获取标题
		},
		methods: {
		  fetchTitleText() {
		      uni.request({
		        url: 'https://qqbyh.cn/API/yiyan.php', // API地址
		        method: 'GET',
		        data: { type: 'text' }, // 请求参数
		        responseType: 'text', // 设置响应类型为文本
		        success: (res) => {
		          if (res.statusCode === 200) {
		            // 处理返回的文本，去除从 /* 开始的所有内容
		            const cleanedText = res.data.split('/*')[0].trim();
		            this.title = cleanedText || '默认标题'; // 设置标题
		          } else {
		            console.error('请求失败:', res);
		          }
		        },
		        fail: (err) => {
		          console.error('请求错误:', err);
		        }
		      });
		    },
					onPreviewImage(url) {
						uni.previewImage({
							urls: this.pictures.map(v => v.url),
							current: url
						});
					},
					handleItemClick(item) {
					
						if (item.text === '答题记录') {
							uni.navigateTo({
								url: 'index/studyrecord/studyrecord'
							});
						}else if (item.text	=== '邀请伙伴') {
							uni.navigateTo({
								url:'index/invite/invite'
							});
						}else if (item.text	=== '参与答题') {
							uni.navigateTo({
								url:'index/studylist/studylist'
							});
						}else if (item.text	=== '排行榜') {
							uni.navigateTo({
								url:'index/studyrank/studyrank'
							});
						}else if (item.text	=== '罗盘游戏') {
							uni.navigateTo({
								url:'index/game/game'
							});
						}else if (item.text	=== '大团队长') {
							uni.navigateTo({
								url:'index/team/team'
							});
						}else if (item.text	=== '意见反馈') {
							uni.navigateTo({
								url:'index/opinion/opinion'
							});
							}else if (item.text	=== '修改资料') {
							uni.navigateTo({
								url:'./my/my?method=handleEditProfile'
							});
						}
						
												
						// 可以在这里添加其他按钮的处理逻辑
					 
		}
	} 
}	
</script>
 
<style>
	.banner,
	.banner image {
		width: 750rpx;
		height: 350rpx;
	}
	
	.box {
		
		background-size: cover;
		padding: 20rpx;
		text-align: center;
		color: #fff;
		background-color: #ADD8E6;
	}
	 
	.box-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.box-description {
		font-size: 16px;
	}
	
	.grid-menu {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-around;
	  padding: 10px;
	  background-color: #f4f4f4;
	  margin-top: 30px;
	  border: #FF9C8D;
	  border-width: 200px;
	}
	.grid-item {
	  width: 200rpx;
	  margin-bottom: 15px;
	  text-align: center;
	   display: flex; /* 新增，使子元素可以使用Flex布局 */
	    align-items: center; /* 新增，垂直居中子元素 */
	    justify-content: center; /* 新增，水平居中子元素 */
	  }
	  
	  .item-content {
	    position: relative; /* 新增，为绝对定位的子元素提供参考 */
	    width: 100%; /* 新增，确保内容宽度与父元素一致 */
	  }
	  
	  .item-icon {
	    width: 30px;
	    height:30px;
		margin-bottom: 20px;
	  }
	  
	  .item-text {
	    position: absolute; /* 新增，使文字绝对定位在图片上方 */
	    bottom: 0; /* 新增，将文字定位到内容的底部 */
	    left: 0; /* 新增，将文字定位到内容的左侧 */
	    right: 0; /* 新增，将文字定位到内容的右侧 */
	    font-size: 14px;
	    text-align: center; /* 新增，确保文字水平居中 */
	    color: #333; /* 新增，定义文字颜色，根据实际需要调整 */
		margin-top: 10px;
	  }
	   .box-title {
	      font-size: 12px; /* 修改这里，调整标题文字大小 */
	      font-weight: bold;
	      margin-bottom: 10rpx;
	    }
</style>
